<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">

          <a-row :gutter="24">
            <a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-model-item label="客户">
                <!--              <j-search-select-tag v-model="model.customerId" dict="biz_customer,name,id"  />-->
                <!--              <JSelectUserByDep></JSelectUserByDep>-->
                <JSelectMultiUser v-model="queryParam.customerId" :query-config="selectUserQueryConfig"
                                  :url="kehuurl" class="kehuInput" />
              </a-form-model-item>
            </a-col>
            <!--          <a-col :xl="6" :lg="7" :md="8" :sm="24">-->
            <!--            <a-form-item label="客户名称">-->
            <!--              <j-search-select-tag placeholder="请选择客户名称" v-model="queryParam.customerId" dict="biz_customer,name,id"/>-->
            <!--            </a-form-item>-->
            <!--          </a-col>-->
            <!--          <a-col :xl="6" :lg="7" :md="8" :sm="24">-->
            <!--            <a-form-item label="联系人">-->
            <!--              <j-multi-select-tag placeholder="请选择联系人" dictCode="biz_contacts,name,id" v-model="queryParam.contactsIds"/>-->
            <!--            </a-form-item>-->
            <!--          </a-col>-->
            <!--          <template v-if="toggleSearchStatus">-->
            <!--            <a-col :xl="6" :lg="7" :md="8" :sm="24">-->
            <!--              <a-form-item label="跟进方式">-->
            <!--                <j-dict-select-tag placeholder="请选择跟进方式" v-model="queryParam.mode" dictCode="follow_mode"/>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <!--            <a-col :xl="6" :lg="7" :md="8" :sm="24">-->
            <!--              <a-form-item label="跟进业务类型">-->
            <!--                <j-dict-select-tag placeholder="请选择跟进业务类型" v-model="queryParam.type" dictCode="follow_type"/>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <!--          </template>-->
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!--              <a @click="handleToggleSearch" style="margin-left: 8px">-->
              <!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
              <!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
              <!--              </a>-->
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        <a-button type="primary" icon="download" @click="handleExportXls('跟进记录')">导出</a-button>
        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                  @change="handleImportExcel">
          <a-button type="primary" icon="import">导入</a-button>
        </a-upload>
        <!-- 高级查询区域 -->
        <!--        <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
        <!--        <a-dropdown v-if="selectedRowKeys.length > 0">-->
        <!--          <a-menu slot="overlay">-->
        <!--            <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
        <!--          </a-menu>-->
        <!--          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
        <!--        </a-dropdown>-->
      </div>

      <!-- table区域-begin -->
      <div class="tab">
        <a-tabs default-active-key="0" @change="tabsChange">
          <a-tab-pane key="0" tab="全部" force-render></a-tab-pane>
          <a-tab-pane key="1" tab="我创建的"></a-tab-pane>
          <a-tab-pane key="2" tab="下属创建的"></a-tab-pane>
        </a-tabs>
      </div>


      <follow-modal ref="modalForm" @ok="modalFormOk"></follow-modal>

      <div class="main">

        <div class="left">
          <div class="totle">总计数量: {{ this.length }} 条</div>
          <div class="followcard-area" v-if="visitorsList.length!=0">
            <div class="followcard" v-for="(item,index) in visitorsList" :key="index" @click="goDetail(item,index)">
              <div class="tiao" :class="current==index?'':'tiao2'"></div>
              <div class="followcard-right">
                <div class="followcard-right-top">
                  <div class="pic">
                    <a-avatar size="large" style="background-color:#4D90FE">{{ item.createBy ? item.createBy : '' }}
                    </a-avatar>
                  </div>
                  <div class="followcard-right-top-concent">

                    <div class="followcard-right-top-concent-top-left">
                      <div>
                        {{ item.createBy ? item.createBy : ''
                        }}&nbsp&nbsp<span>{{ item.createTime ? item.createTime : '' }}</span>
                      </div>
                      <div class="middle-card">
                        <div class="followcard-right-top-concent-bottom">{{ item.mode_dictText }}</div>
                        <div class="shu">&nbsp|&nbsp</div>
                        <a class="yonghuming" @click="handleCustomerDetail(item)"> {{ item.customerIdDictText }}</a>
                      </div>
                    </div>

                    <div class="followcard-right-top-concent-top-right" style="color: #4D90FE"></div>


                  </div>

                </div>
                <div class="followcard-right-middle">跟进内容：{{ item.contents ? item.contents : '无' }}</div>
                <div class="followcard-right-bottom">
                  联系人：{{ item.contactsIdDictText ? item.contactsIdDictText : '无' }}
                </div>
              </div>
            </div>
            <div class="tip">~没有更多了~</div>
            <!--          <div class="followcard">22</div>-->
            <!--          <div class="followcard">22</div>-->
            <!--          <div class="followcard">22</div>-->
            <!--          <div class="followcard">22</div>-->

          </div>
          <div v-else class="zanwushuju">~暂无数据~</div>

        </div>
        <div class="right" v-if="visitorsList.length>0">
          <div class="huifu">
            <div class="huifutop">

              <div class="pic">
                <a-avatar size="large" style="background-color:#4D90FE">{{ choosevisitorsList.createBy }}</a-avatar>
              </div>
              <div class="huifu-concent">

                <div class="huifu-concent-top">
                  <div>{{ choosevisitorsList.createBy }} &nbsp&nbsp <span>{{ choosevisitorsList.createTime }}</span>
                  </div>
                  <div class="caozuo">
                    <div class="editlist" @click="handleEdit(choosevisitorsList)">编辑</div>
                    <div class="editlist">
                      <a-popconfirm
                        title="确认删除此跟进记录吗?"
                        ok-text="是的"
                        cancel-text="取消"
                        @confirm="()=>{handleDelete(choosevisitorsList.id)}"
                        @cancel="cancel"
                      >
                        <a v-has="'follow:delete'">删除</a>
                      </a-popconfirm>
                    </div>
                  </div>
                </div>
                <div class="followcard-right-top-concent-bottom">{{ choosevisitorsList.mode_dictText }} |
                  {{ choosevisitorsList.customerIdDictText }}
                </div>
                <div class="genjinneirong">跟进内容：{{ choosevisitorsList.contents ? choosevisitorsList.contents : '无' }}
                </div>
                <div class="followcard-right-bottom">
                  联系人：{{ choosevisitorsList.contactsIdDictText ? choosevisitorsList.contactsIdDictText : '无' }}
                </div>


              </div>

            </div>
            <!--          <div class="down">-->
            <!--            <div>-->
            <!--              <a-list-->
            <!--                v-if="comments.length"-->
            <!--                :data-source="comments"-->
            <!--                :header="`${comments.length} ${comments.length > 1 ? '回复' : '回复'}`"-->
            <!--                item-layout="horizontal"-->
            <!--              >-->
            <!--                <a-list-item slot="renderItem" slot-scope="item, index">-->
            <!--                  <a-comment-->
            <!--                    :author="item.author"-->
            <!--                    :avatar="item.avatar"-->
            <!--                    :content="item.content"-->
            <!--                    :datetime="item.datetime"-->
            <!--                  />-->
            <!--                </a-list-item>-->
            <!--              </a-list>-->
            <!--              <a-comment>-->
            <!--                <a-avatar-->
            <!--                  slot="avatar"-->
            <!--                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"-->
            <!--                  alt="Han Solo"-->
            <!--                />-->
            <!--                <div slot="content">-->
            <!--                  <a-form-item>-->
            <!--                    <a-textarea :rows="4" :value="value" @change="handleChange" />-->
            <!--                  </a-form-item>-->
            <!--                  <a-form-item>-->
            <!--                    <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">-->
            <!--                      回复-->
            <!--                    </a-button>-->
            <!--                  </a-form-item>-->
            <!--                </div>-->
            <!--              </a-comment>-->
            <!--            </div>-->
            <!--          </div>-->
          </div>
          <div class="xinxi">
            <div class="title">基础信息</div>
            <div class="xinxi-left" v-if="choosevisitorsList.customerIdDictText">客户名称:</div>
            <div class="xinxi-right kehumingcheng" @click="handleCustomerDetail(choosevisitorsList)"
                 v-if="choosevisitorsList.customerIdDictText">{{ choosevisitorsList.customerIdDictText }}
            </div>
            <div class="dizhi">
              <div class="xinxi-left" v-if="choosevisitorsList.address">地址:</div>
              <j-area-linkage class="shengshiqu" v-if="choosevisitorsList.address" type="cascader" disabled="disabled"
                              v-model="choosevisitorsList.address" />

            </div>

            <div class="xinxi-left" v-if="choosevisitorsList.addressInfo">详细地址:</div>
            <div class="xinxi-right" v-if="choosevisitorsList.addressInfo">{{ choosevisitorsList.addressInfo }}</div>
            <div class="xinxi-left" v-if="choosevisitorsList.contactsIds">联系人：</div>
            <div class="xinxi-right kehumingcheng lianxiren"
                 v-if="choosevisitorsList.contactsIds">
              <span class="lianxirenitem" @click="handleContactDetail(item,index)"
                    v-for="(item,index) in choosevisitorsListname" :key="index">{{ item }}</span>
            </div>
            <div class="xinxi-left" v-if="choosevisitorsList.mode_dictText">跟进方式：</div>
            <div class="xinxi-right" v-if="choosevisitorsList.mode_dictText">{{ choosevisitorsList.mode_dictText }}
            </div>
            <div class="xinxi-left" v-if="choosevisitorsList.updateTime">跟进时间：</div>
            <div class="xinxi-right" v-if="choosevisitorsList.updateTime">{{ choosevisitorsList.updateTime }}</div>
            <div class="xinxi-left" v-if="choosevisitorsList.type_dictText">跟进业务：</div>
            <div class="xinxi-right" v-if="choosevisitorsList.type_dictText">{{ choosevisitorsList.type_dictText }}
            </div>

            <div class="xinxi-left" v-if="choosevisitorsList.number">业务单号：</div>
            <div class="xinxi-right kehumingcheng" v-if="choosevisitorsList.number"
                 @click="handleYewuDetail(choosevisitorsList)">{{ choosevisitorsList.number }}
            </div>
            <div class="xinxi-left" v-if="choosevisitorsList.contents">跟进内容：</div>
            <div class="xinxi-right genjinneirong" v-if="choosevisitorsList.contents">
              {{ choosevisitorsList.contents }}
            </div>
            <div class="title">系统信息</div>
            <div class="xinxi-left">创建人:</div>
            <div class="xinxi-right">{{ choosevisitorsList.createBy }}</div>
            <div class="xinxi-left">创建时间:</div>
            <div class="xinxi-right">{{ choosevisitorsList.createTime }}</div>
          </div>
        </div>
      </div>
    </a-card>
    <CustomerModal ref="CustomerModal"></CustomerModal>
    <ContactsModal ref="ContactsModal"></ContactsModal>
    <salesOpportunintyModal ref="salesModal" @ok="modalFormOk"></salesOpportunintyModal>
    <ContractOrderModal ref="contractModal" @ok="modalFormOk"></ContractOrderModal>
    <quartzJobModal ref="quartzJobModal" @ok="modalFormOk"></quartzJobModal>
  </div>


</template>

<script>
import ContactsModal from '@/views/contacts/modules/ContactsModal.Style#Drawer'
import moment from 'moment'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FollowModal from './modules/FollowModal.Style#Drawer'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUserCustom'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import Area from '@/components/_util/Area'
import { deleteAction, getAction } from '@api/manage'
import CustomerModal from '@/views/customer/modules/CustomerModal.Style#Drawer'
import SalesOpportunintyModal from '@views/SalesOpportunintyList/modules/SalesOpportunintyModal'
import ContractOrderModal from '@views/ContractOrderList/modules/ContractOrderModal'
import quartzJobModal from '@/views/QuotationList/modules/QuotationModal'

export default {
  name: 'FollowList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    FollowModal,
    JSelectMultiUser,
    CustomerModal,
    ContactsModal,
    SalesOpportunintyModal,
    ContractOrderModal,
    quartzJobModal
  },
  data() {
    return {
      current: 0,
      //跟进记录条数
      length: 0,
      //跟进记录列表
      choosevisitorsList: {},
      choosevisitorsListname: [],
      choosevisitorsListId: [],
      visitorsList: [],
      comments: [],
      submitting: false,
      value: '',
      moment,
      kehuurl: '/customer/customer/list?filed=2',
      // 选择用户查询条件配置
      selectUserQueryConfig: [
        { key: 'customerId', label: '客户' }
      ],
      description: '跟进记录管理页面',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'customerIdDictText'
        },
        {
          title: '联系人',
          align: 'center',
          dataIndex: 'contactsIdDictText'
        },
        {
          title: '跟进方式',
          align: 'center',
          dataIndex: 'mode_dictText'
        },
        {
          title: '跟进业务类型',
          align: 'center',
          dataIndex: 'type_dictText'
        },
        {
          title: '业务类型单号',
          align: 'center',
          dataIndex: 'number'
        },
        {
          title: '地址',
          align: 'center',
          dataIndex: 'address',
          scopedSlots: { customRender: 'pcaSlot' }
        },
        {
          title: '详细地址',
          align: 'center',
          dataIndex: 'addressInfo'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        quotationlist: '/quotation/quotation/list',
        //合同订单
        contractOrderlist: '/contractorder/contractOrder/list',
        //销售机会
        salesOpportuninty: '/sales/salesOpportuninty/list',
        contactList: '/contacts/contacts/list',
        contactbyid: '/contacts/contacts/queryById',
        queryUrl: '/customer/customer/list',
        queryById: '/follow/follow/queryById',
        list: '/follow/follow/list',
        delete: '/follow/follow/delete',
        deleteBatch: '/follow/follow/deleteBatch',
        exportXlsUrl: '/follow/follow/exportXls',
        importExcelUrl: 'follow/follow/importExcel'

      },
      dictOptions: {},
      pcaData: '',
      superFieldList: []
    }
  },
  created() {
    this.getFollowList()
    this.pcaData = new Area()
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    //确认删除列表
    cancel(e) {
      console.log(e)
      this.$message.error('已取消')
    },
    //tab页查询
    tabsChange(e) {
      console.log(e)
      if (e == 0) {
        this.queryParam = {}
        this.getFollowList()
      } else {
        this.queryParam.statusTop = e
        this.getFollowList()
      }

    },
    handleDelete: function(id) {
      if (!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      var that = this
      deleteAction(that.url.delete, { id: id }).then((res) => {
        if (res.success) {
          //重新计算分页问题
          that.reCalculatePage(1)
          that.$message.success(res.message)
          that.getFollowList()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleEdit: function(record) {
      console.log('333', record)
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },

    goDetail(e, index) {
      console.log('选中的', e)
      this.current = index
      this.choosevisitorsList = e
      this.choosevisitorsListname = e.contactsIdDictText.split(',')
      this.choosevisitorsListId = e.contactsIds.split(',')
      console.log('22222', this.choosevisitorsList)
      console.log('33333', this.choosevisitorsListname)
      console.log('44444', this.choosevisitorsListId)
    },

    handleCustomerDetail(record) {
      this.loading = true
      getAction(this.url.queryUrl, { id: record.customerId }).then(res => {
        console.log('客户信息', res)
        if (res.success) {
          this.$refs.CustomerModal.dongtai(record.customerId)
          this.$refs.CustomerModal.dongtaiShow = true
          this.$refs.CustomerModal.title = '客户详情'
          this.$refs.CustomerModal.disableSubmit = true
          this.$refs.CustomerModal.edit(res.result.records[0])

        } else {
          this.$message.error(res.message)
        }

      }).finally(() => {
        this.loading = false
      })
      // this.$refs.CustomerModal.edit(record)
    },
    handleYewuDetail(record) {
      this.loading = true
      console.log('业务单号信息', record)
      switch (record.type) {
        case 1:
          console.log('这是一个销售机会')
          getAction(this.url.salesOpportuninty, { id: record.businessId }).then(res => {
            console.log('销售机会返回结果', res)
            this.$refs.salesModal.title = '销售机会详情'
            this.$refs.salesModal.disableSubmit = true
            this.$refs.salesModal.edit(res.result.records[0])
          })
          break
        case 2:
          console.log('这是一个合同')
          getAction(this.url.contractOrderlist, { id: record.businessId }).then(res => {
            console.log('合同返回结果', res)
            this.$refs.contractModal.title = '合同订单详情'
            this.$refs.contractModal.disableSubmit = true
            this.$refs.contractModal.edit(res.result.records[0])
          })
          break
        case 3:
          console.log('这是一个报价单')
          getAction(this.url.quotationlist, { id: record.businessId }).then(res => {
            console.log('报价单返回结果', res)
            this.$refs.quartzJobModal.title = '报价单详情'
            this.$refs.quartzJobModal.disableSubmit = true
            this.$refs.quartzJobModal.edit(res.result.records[0])
          })
          break
        default:
          this.$message.error(res.message)

      }
      // console.log('业务单号信息', record)
      // if(record.type=1){
      //   console.log('这是一个销售机会')
      //   getAction(this.url.salesOpportuninty,{id:record.businessId}).then(res =>{
      //     console.log('销售机会返回结果', res)
      //     this.$refs.salesModal.title = '销售机会详情'
      //     this.$refs.salesModal.disableSubmit = true
      //     this.$refs.salesModal.edit(res.result.records[0])
      //   })
      // }
    },
    handleContactDetail(item, index) {
      console.log('写的太可怕了！！！！！！！！！！！', item)
      this.loading = true
      console.log('联系人信息item', item)
      console.log('联系人信息index', index)
      getAction(this.url.contactbyid, { id: this.choosevisitorsList.contactsIds }).then(res => {
        console.log('联系人信息2', res)
        if (res.success) {
          // this.$refs.ContactsModal.dongtai(record.customerId)
          // this.$refs.ContactsModal.dongtaiShow = true
          this.$refs.ContactsModal.title = '联系人详情'
          this.$refs.ContactsModal.disableSubmit = true
          this.$refs.ContactsModal.edit(res.result)

        } else {
          this.$message.error(res.message)
        }

      }).finally(() => {
        this.loading = false
      })
      // this.$refs.CustomerModal.edit(record)
    },
    // 评论功能
    handleSubmit() {
      if (!this.value) {
        return
      }

      this.submitting = true

      setTimeout(() => {
        this.submitting = false
        this.comments = [
          {
            author: 'admin',
            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: this.value,
            datetime: moment().fromNow()
          },
          ...this.comments
        ]
        this.value = ''
      }, 1000)
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData()
      this.getFollowList()
      //清空列表选中
      this.onClearSelected()

    },
    //获取跟进记录
    getFollowList() {
      getAction(this.url.list, {
        customerId: this.queryParam.customerId,
        statusTop: this.queryParam.statusTop
      }).then(res => {
        console.log('获取跟进记录', res)
        // this.visitorsList = []
        if (res.code == 200) {
          console.log('res.result.records', res.result.records)
          if (res.result.records.length <= 0) {
            this.current = ''
            this.visitorsList = []
            this.choosevisitorsList = {}
            this.length = res.result.records.length
          } else {
            this.current = 0
            this.visitorsList = res.result.records
            this.choosevisitorsList = res.result.records[this.current]
            this.choosevisitorsListname = this.choosevisitorsList.contactsIdDictText.split(',')
            this.length = res.result.records.length
            console.log('跟进记录', this.visitorsList)
            console.log('写的乱起八拉遭！！！！', this.choosevisitorsList)
          }

        } else {
          this.$message.error(res.message)
        }

      })

    },
    handleChange(e) {
      this.value = e.target.value
    },
    getPcaText(code) {
      return this.pcaData.getText(code)
    },
    //查询
    searchQuery() {
      this.getFollowList()
    },
    //重置
    searchReset() {
      this.queryParam = {}
      this.getFollowList()
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({
        type: 'sel_search',
        value: 'customerId',
        text: '客户ID',
        dictTable: 'biz_customer',
        dictText: 'name',
        dictCode: 'id'
      })
      fieldList.push({
        type: 'list_multi',
        value: 'contactsIds',
        text: '联系人IDS',
        dictTable: 'biz_contacts',
        dictText: 'name',
        dictCode: 'id'
      })
      fieldList.push({ type: 'int', value: 'mode', text: '跟进方式(1.当面拜访 2.电话拜访  3.网络拜访)', dictCode: 'follow_mode' })
      fieldList.push({ type: 'int', value: 'type', text: '跟进业务类型(1.销售机会 2.合同订单 3.报价单)', dictCode: 'follow_type' })
      fieldList.push({ type: 'string', value: 'businessId', text: '业务类型(对应表ID)', dictCode: '' })
      fieldList.push({ type: 'pca', value: 'address', text: '地址' })
      fieldList.push({ type: 'string', value: 'addressInfo', text: '详细地址', dictCode: '' })
      this.superFieldList = fieldList

    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.followcard-right-top-concent-top-right {
  cursor: pointer;
}

.main {
  width: 100%;
  height: 900px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.left {
  display: flex;
  flex-direction: column;
  width: 40%;
  height: 700px;
  padding: 10px;
  border: 1px #eeeeee solid;
}

.followcard-area {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: baseline;
  align-content: flex-start;
  overflow: auto;
  flex-wrap: wrap;

}

.followcard {
  width: 90%;
  height: 140px;
  background-color: #FFFFFF;
  margin-top: 10px;
  border-radius: 6px;
  /*border: 1px #eeeeee solid;*/
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

.followcard:hover {
  background-color: #fafafa;
}

.tiao {
  width: 6px;
  height: 100%;
  background-color: #ff7c35;
}

.tiao2 {
  width: 6px;
  height: 100%;
  background-color: #ffffff;
}

.followcard-right {
  width: calc(100% - 6px);
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.followcard-right-top {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.followcard-right-top-concent {
  width: calc(100% - 50px);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

.followcard-right-top-concent-top-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.huifutop {
  display: flex;
  padding: 20px;
  width: 100%;
  height: 120px;
}

.huifu-concent {
  width: 95%;
  margin-left: 10px;
}

.huifu-concent-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.right {
  width: 60%;
  height: 600px;
}

.huifu {
  width: 100%;
  background-color: #ffffff;
  border: 1px #eeeeee solid;
  padding: 20px;
  margin-left: 10px;

}

.down {
  width: 100%;
  padding: 20px;
}

.xinxi {
  width: 100%;
  margin-top: 10px;
  margin-left: 10px;
  padding: 30px;
  border: 1px #eeeeee solid;
  background-color: #ffffff;
}

.title {
  font-size: 20;
  color: #333333;
  font-weight: 600;
  line-height: 40px;
  border-bottom: #eeeeee 1px dashed;
}

.xinxi-left {
  float: left;
  line-height: 40px;
  width: 100px;
}

.xinxi-right {
  line-height: 40px;
  color: #333;
}

.tip {
  margin-top: 20px;
}

.followcard-right-middle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.genjinneirong {
  word-wrap: break-word;
}

.editlist {
  color: #4D90FE;
  margin-left: 6px;
}

.tab {
  width: 100%;
  margin: 10px 0 10px 0;
  background-color: #FFFFFF;
}

.zanwushuju {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
}

.caozuo {
  display: flex;
  flex-direction: row;

}

.middle-card {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.kehumingcheng {
  color: #4D90FE;
  cursor: pointer;
}

.yonghuming {
  /*width: 70%;*/
  max-width: 70%;
  white-space: nowrap;
  /* 超出隐藏 */
  overflow: hidden;
  /* 文本超出显示成... */
  text-overflow: ellipsis;
}

.shengshiqu {
  width: calc(100% - 100px);
}

.dizhi {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.kehuInput {
  width: 240px;
}

.lianxiren {
  display: flex;
  flex-direction: row !important;
}

.lianxirenitem {
  margin-right: 10px;
}

</style>